<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="./css/common.css   ">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <nav class="nav-header-bar">
        <div class="container-box">
            <ul class="nav-header-left">
                <li><a href="#">小米官网</a>|</li>
                <li><a href="#">小米商城</a>|</li>
                <li><a href="#">MIUI</a>|</li>
                <li><a href="#">IoT</a>|</li>
                <li><a href="#">云服务</a>|</li>
                <li><a href="#">天星数科</a>|</li>
                <li><a href="#">有品</a>|</li>
                <li><a href="#">小爱开放平台</a>|</li>
                <li><a href="#">资质证照</a>|</li>
                <li><a href="#">协议规则</a>|</li>
                <li><a href="#">下载app</a>|</li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul class="nav-header-right">
                <li><a href="#">登录</a>|</li>
                <li><a href="#">注册</a>|</li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#"><em class="iconfont-cart"></em>购物车(0)</a></li>
            </ul>
        </div>
    </nav>
    <header class="header-box">
        <div class="container-box wrapper">
            <a href="#"><img class="log" src="	https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"
                    alt=""></a>
            <ul>
                <li><a href="#">Xiaomi手机</a></li>
                <li><a href="#">Redmi手机</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">平板</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">服务中心</a></li>
                <li><a href="#">社区</a></li>
            </ul>
            <div class="search-box">
                <input type="text">

                <span>搜索</span>
                <ul>
                    <li>手机换新</li>
                    <li>红米</li>
                    <li>redmi book 14</li>
                    <li>洗衣机</li>
                    <li>耳机</li>
                    <li>冰箱</li>
                    <li>充电宝</li>
                    <li>笔记本</li>
                </ul>
            </div>
        </div>

        <script>
            ; (function () {
                let parent = document.querySelector(".header-box>.container-box .search-box")
                let keyWordBox = document.querySelector(".header-box>.container-box .search-box ul")
                let input = document.querySelector(".header-box>.container-box .search-box input")
                input.addEventListener("focus", () => {
                    parent.style.borderColor = '#ff6a00'
                    keyWordBox.style.display = "flex"
                })
                input.addEventListener('blur', () => {
                    parent.style.borderColor = '#99999958'
                    keyWordBox.style.display = "none"
                })
                parent.addEventListener('mouseenter', () => {

                    if (parent.style.borderColor != "rgb(255, 106, 0)") {
                        parent.style.borderColor = '#99999994'

                    }
                })
                parent.addEventListener('mouseleave', (e) => {
                    if (parent.style.borderColor != "rgb(255, 106, 0)") {
                        parent.style.borderColor = '#99999958'
                    }
                })


            }())
        </script>
    </header>
    <div class="banner-box wrapper">
        <img class="banner" src="./image/banner/1.webp" alt="">
        <ul class="left-box">
            <li><a href="">手机</a><span>></span></li>
            <li><a href="">电视</a><span>></span></li>
            <li><a href="">家电</a><span>></span></li>
            <li><a href="">笔记本 平板</a><span>></span></li>
            <li><a href="">出行 穿戴</a><span>></span></li>
            <li><a href="">耳机 音箱</a><span>></span></li>
            <li><a href="">健康 儿童</a><span>></span></li>
            <li><a href="">生活 箱包</a><span>></span></li>
            <li><a href="">智能 路由器</a><span>></span></li>
            <li><a href="">电源 配件</a><span>></span></li>
        </ul>
        <div class="right"></div>
    </div>

    <div class="main-nav-box wrapper">
        <ul class="nav-left">
            <li><img src="./css/icon/img/1.png"><span>保障服务</span></li>
            <li><img src="./css/icon/img/2.png"><span>企业团购</span></li>
            <li><img src="./css/icon/img/3.png"><span>F码通道</span></li>
            <li><img src="./css/icon/img/4.png"><span>米粉卡</span></li>
            <li><img src="./css/icon/img/5.png"><span>以旧换新</span></li>
            <li><img src="./css/icon/img/6.png"><span>话费充值</span></li>
        </ul>
        <ul class="right">
            <li><img src="./image/main_nav_left_img/1.jpg"></li>
            <li><img src="./image/main_nav_left_img/2.jpg"></li>
            <li><img src="./image/main_nav_left_img/3.png"></li>
        </ul>
    </div>

    <div class="main-box">
        <div class="wrapper">
            <div style="height:30px;"></div>
            <img src="./image/center_bar/1.webp" alt="" class="main-center-img">
            <div style="height:30px;"></div>


            
            <div class="phone-box">
                <div class="tool-bar">
                    <span class="left">手机</span>
                    <div class="right">
                        <p>查看更多</p>
                        <span>></span>
                    </div>
                </div>
                <div class="main">
                    <img src="./image/phone1/main.webp" class="left"/>
                <ul class="right">
                    <li>
                        <img src="./image/phone1/1.webp" alt="">
                            <span>Redmi Note 13 Pro</span>
                            <p>小金刚品质</p>
                            <div><span>1399元起</span><del>1499元起 </del></div>
                        </img>
                    </li>
                    <li>
                        <img src="./image/phone1/2.webp" alt="">
                            <span>Redmi Note 13 Pro+</span>
                            <p>天玑 7200-Ultra 处理器</p>
                            <div><span>1899元起</span><del>1999元</del></div>
                        </img>
                    </li>
                    <li>
                        <img src="./image/phone1/3.webp" alt="">
                            <span>Redmi Note 13 5G</span>
                            <p>1 亿像素 更快更清晰</p>
                            <div><span>1099元起</span><del>1199元</del></div>
                        </img>
                    </li>
                    <li>
                        <img src="./image/phone1/4.webp" alt="">
                            <span>Xiaomi MIX Fold 3</span>
                            <p>轻薄折叠屏|徕卡光学|全焦段四摄</p>
                            <div><span>8999元起</span><del></del></div>
                        </img>
                    </li>
                    <li>
                        <img src="./image/phone1/5.webp" alt="">
                            <span>Redmi K60 至尊版</span>
                            <p>旗舰体验全面超预期</p>
                            <div><span>2599元</span><del></del></div>
                        </img>
                    </li>
                    <li>
                        <img src="./image/phone1/6.webp" alt="">
                            <span>Redmi 12 5G</span>
                            <p>5G 骁龙芯，大屏大电量</p>
                            <div><span>949元起</span><del></del></div>
                        </img>
                    </li>
                    <li>
                        <img src="./image/phone1/7.webp" alt="">
                            <span>Redmi Note 12T Pro</span>
                            <p>年度 LCD 屏幕之光</p>
                            <div><span>1499元起</span><del>1599元</del></div>
                        </img>
                    </li>
                    <li>
                        <img src="./image/phone1/8.webp" alt="">
                            <span>Xiaomi Civi 3</span>
                            <p>仿生双眸 天生出色</p>
                            <div><span>2299元起</span><del></del></div>
                        </img>
                    </li>
                </ul>
                </div>
            </div>










        </div>


    </div>





</body>






</html>